@use 'sass:math';

/*
   波浪太高了 , 怎么调整平滑一点呢 ?
   定义 $p 调整波浪的起伏度
   定义 $x 计算圆心的距离 , 控制横向偏移和纵向偏移
    - 半径和圆圈的偏移满足三角函数的关系 
 */
// .box {
//     $r: 50;
//     $p: 30;
//     $x: 40;
//     // $x: 2 * math.sqrt($r*$r - $p*$p);
//     height: 600px;
//     border: 1px solid #ccc;
//     background-image: radial-gradient(#{$r}px at 50% #{$r + $p}px,
//         #f40 100%,
//         transparent 101%),
//     radial-gradient(#{$r}px at 50% #{-$p}px,
//         transparent 100%,
//         #f40 101%);
//     // 101% 是为了避免出现锯齿状
//     background-size:#{2 * $x}px 100%;
//     background-position: calc(50% - #{$x}px) 0,
//     50% #{$r}px;
//     background-repeat: repeat-x;
// }
$random-number: math.random();

// 如何应用在图片上 ? 做一个蒙层盖上去
.box {
    $r: 50;
    $p: 30;
    $x: 40;
    // $x: 2 * math.sqrt($r*$r - $p*$p);
    height: 600px;
    border: 1px solid #ccc;
    $bg: radial-gradient(#{$r}px at 50% #{$r + $p}px,
            #f40 100%,
            transparent 101%) calc(50% - #{$x}px) 0 / #{2 * $x}px 100% repeat-x,
        radial-gradient(#{$r}px at 50% #{-$p}px,
            transparent 100%,
            #f40 101%) 50% #{$r}px / #{2 * $x}px 100% repeat-x;
    mask: $bg;
    -webkit-mask: $bg;
}